<script setup>
import {ref} from "vue";
import axios from "@/request.js";

const rechargeHistory = ref([]);

const count = ref(3)
const loading = ref(false)
const noMore = ref(false)

//获取积分出入事件
const getRechargeHistory = () => {
  loading.value = true
  setTimeout(() => {
    count.value += 2
    loading.value = false

    if (count.value >= rechargeHistory.value.length) {
      noMore.value = true;
    }
  }, 2000)

  axios.get("/rechargeManager/getRechargeHistory").then(resp => {
    rechargeHistory.value = resp.date;
    console.log(resp)
  })
};

</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header style="font-size: 18px">用户充值管理</el-header>
      <el-main>
        <div>
          <el-button type="primary" @click="getRechargeHistory">获取用户充值历史</el-button>
        </div>

        <div class="infinite-list-wrapper" style="overflow: auto">
          <li v-for="(list, index) in rechargeHistory" :key="index" class="list-item">
            <span>用户名：{{list.username}}</span>
            <span>交易编号：{{list.id}}</span>
            <span>用户ID：{{list.userId}}</span>
            <span>充值时间：{{list.rechargeTime}}</span>
            <span>充值金额：{{list.balanceRecord}}</span>
            <span>状态：{{list.status }}</span>
          </li>
          <p v-if="loading">Loading....</p>
          <p v-if="noMore">No more</p>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<style scoped>
.common-layout {
  padding: 20px;
}

.infinite-list-wrapper {
  margin-top: 30px;
  width: 1200px;
  height: 500px;
  text-align: center;
}

.infinite-list-wrapper .list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  background: var(--el-color-danger-light-9);
  color: var(--el-color-danger);
}

.infinite-list-wrapper .list-item + .list-item {
  margin-top: 10px;
}

.list-item span{
  margin: 0 15px 0 15px;
}
</style>